<template>
  <div class="px-5 pb-5 border-b">
    <Row :gutter="40">
      <Col :span="6">
        <Row :gutter="20">
          <Col :span="8">设备序列号</Col>
          <Col :span="16">{{ pageData.code }}</Col>
        </Row>
      </Col>
      <Col :span="6">
        <Row>
          <Col :span="8">协议版本</Col>
          <Col :span="16">{{ pageData.protobufVersion }}</Col>
        </Row></Col
      >
      <Col :span="6">
        <Row>
          <Col :span="8">设备类型</Col>
          <Col :span="16">{{ pageData.deviceTypeLabel }}</Col>
        </Row></Col
      >
      <Col :span="6">
        <Row>
          <Col :span="8">设备型号</Col>
          <Col :span="16">{{ pageData.model }}</Col>
        </Row></Col
      >
      <Col :span="6">
        <Row>
          <Col :span="8">所属项目</Col>
          <Col :span="16">{{ pageData.projectName }}</Col>
        </Row></Col
      >
      <Col :span="6">
        <Row>
          <Col :span="8">软件版本</Col>
          <Col :span="16">{{
            `${pageData.softwareVersion || ''}${pageData.versionCode ? `(${pageData.versionCode})` : ''}`
          }}</Col>
        </Row></Col
      >
      <Col :span="6">
        <Row>
          <Col :span="8">固件版本</Col>
          <Col :span="16">{{ pageData.firmwareVersion }}</Col>
        </Row></Col
      >
    </Row>
  </div>

  <ProTable
    ref="tableRef"
    :fetchListApi="_listQuickConfig"
    :columns="columns"
    :height="700"
    row-key="id"
  >
    <template #operation="{ record }">
      <b-button icon="detail" type="link" @click="onView(record)"
        >查看</b-button
      >
      <!-- <b-button icon="edit" type="link" @click="onSelect(record)"
        >选择</b-button
      > -->
    </template>
    <template #configType="{ record }">
      <template v-if="record.configType.includes('{')">
        <Tree :tree-data="JSON.parse(record.configType)" />
      </template>
      <template v-else>
        <Popover
          placement="right"
          trigger="hover"
          :overlayStyle="{ width: '100px' }"
          overlayClassName="popovper-dark"
          v-if="record.configType.split(',').length > 2"
        >
          <template #content>
            <ul>
              <li v-for="item in record.configType.split(',')">{{ item }}</li>
            </ul>
          </template>
          <div class="truncate w-full" v-html="record.configType"></div>
        </Popover>
        <div v-else class="truncate w-full" v-html="record.configType"></div>
      </template>
    </template>
  </ProTable>

  <Modal
    title="快速配置"
    v-model:open="configTabsVisible"
    :width="1400"
    :mask-closable="false"
    :keyboard="false"
    :footer="null"
    centered
    destroy-on-close
    class="deviceTabsModal"
  >
    <ConfigTabs :page-data="pageDate" :type="type" @close="close" />
  </Modal>
</template>

<script setup lang="tsx">
import { computed, ref } from 'vue';
import ConfigTabs from '@/views/push/quickConfig/components/ConfigTabs.vue';
import { Col, Modal, Popover, Row, Tree, message } from 'ant-design-vue';
import { ProTable, ProTableProps } from '@/components/ProTable/index';
import { listToEnum } from '@/utils/utils';
import { getDictType } from '@/api/monitor';
import { saveRecord } from '@/api/notice';
import { fastUpdateDeviceConf, listQuickConfig } from '@/api/push';

defineOptions({
  name: 'OpenAllConfig',
});
const close = () => {
  configTabsVisible.value = false;
};
interface Props {
  pageData: any;
}
const props = defineProps<Props>();
const tableRef = ref();
const configTabsVisible = ref(false);
const type = ref('');
const pageDate: any = ref({});
const columns = computed<ProTableProps['columns']>(() => [
  {
    title: '创建时间',
    dataIndex: 'createTime',
    hideInSearch: true,
  },
  {
    title: '推送次数',
    dataIndex: 'pushCount',
    hideInSearch: true,
  },
  {
    title: '配置说明',
    dataIndex: 'configExplain',
  },
  {
    title: '配置类别',
    dataIndex: 'configType',
    hideInSearch: true,
    width: 150,
  },
  {
    title: '配置人',
    dataIndex: 'createBy',
    hideInSearch: true,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    hideInSearch: true,
    fixed: 'right',
    width: 150,
  },
]);

const _listQuickConfig = async (params: any) => {
  const res = await listQuickConfig({
    ...params,
    protobufVersion: props.pageData.protobufVersion,
    modelIds: [props.pageData.modelId],
  });
  return { rows: [...res.rows], total: res.total || 0 };
};
console.log(props.pageData, 'props.pageData');
const emit = defineEmits(['close']);
const onView = async (record: any) => {
  pageDate.value = record;
  type.value = 'info';
  configTabsVisible.value = true;
};

const typeEnum: any = ref();
const dictInit = () => {
  getDictType('device_operate_type').then((res) => {
    typeEnum.value = listToEnum(res.data as any, 'dictLabel', 'dictCode');
  });
};

dictInit();

const onSelect = async (record: any) => {
  Modal.confirm({
    title: '系统提示',
    centered: true,
    content: `是否确认选择当前设备？`,
    onOk: async () => {
      let deviceCode = props.pageData.code;
      const data: any = {
        deviceCode,
        id: record.id,
      };
      const _params = new FormData();
      Object.keys(data).forEach((key) => {
        _params.append(key, data[key]);
      });
      const res = await fastUpdateDeviceConf(_params);
      saveRecordFn(
        props.pageData,
        res,
        '推送',
        JSON.stringify(_params),
        '/quickConfig/updateDeviceConfig',
      );
      message.success('配置成功！');
      emit('close');
    },
  });
};

const saveRecordFn = async (
  item: any,
  res: any,
  operateButton: any,
  requestParam: any,
  operateUri: string,
) => {
  const list = [
    {
      deviceCode: item.code,
      operateModule: '设备管理/设备总览/快速配置',
      requestParam,
      status: res.code == 200 ? 1 : 0,
      operateButton,
      operateType: typeEnum.value[operateButton],
      operateUri,
    },
  ];
  await saveRecord({ list });
};
</script>
